<template>


	<view class="skeleton-container" v-if="loading">
		<uv-skeleton
		rows="20"
		title
		loading
		></uv-skeleton>
	</view>

	<view v-else>
		
		<view class="search-container">
			<TmpSearch 
				:searchValue="搜索"
			/>
		</view>

		<!-- 分类导航 -->
		<view class="category-nav" v-if="!loading">
			<view class="category-container">
				<uv-tabs
					:list="categoryType"
					:current="currentTab.typeIndex"
					@change="clickCategoryType"
					lineColor="$uv-primary"
					activeStyle="color:$uv-primary;font-weight:bold;"
					style="margin-bottom: 30rpx;"
				>
					<template v-slot:right>
						<view
							style="padding-left: 4px;"
							@tap="clickTabMore"
						>
							<uv-icon
								name="list"
								size="21"
								bold
							></uv-icon>
						</view>
					</template>
				</uv-tabs>
			</view>
			<view class="category-container">
				<uv-tabs
					:list="categoryFirst"
					:current="currentTab.firstIndex"
					@change="clickCategoryFirst"
					lineColor="$uv-primary"
					activeStyle="color:$uv-primary;font-weight:bold;"
					style="margin-bottom: 30rpx;"
				>
				</uv-tabs>
			</view>
			<view class="category-container">
				<uv-tabs
					:list="categorySecond"
					:current="currentTab.secondIndex"
					@change="clickCategorySecond"
					lineColor="$uv-primary"
					activeStyle="color:$uv-primary;font-weight:bold;"
					style="margin-bottom: 30rpx;"
				/>
			</view>
		</view>


		<!-- 内容列表 -->
		<view class="content" v-if="!loading">

			<view class="content-loading" v-if="contentLoading">
				<view class="uv-page__loading-item">
					<uv-loading-icon mode="semicircle"></uv-loading-icon>
				</view>
			</view>

			<template v-if="contentList && contentList.length > 0 && !contentLoading" v-for="(item, idx) in contentList">
				
				<TmpArticleCourse
					v-if="item.contentType == 'course'"
					:item="item.contentInfo"
				/>

				<!--文案-->
				<TmpArticleCopywriting
					v-if="item.contentType == 'copywriting'  "
					:item="item.contentInfo"
				/>

			</template>
			<view v-else class="no-data">
				
			</view>
		</view>

		<!-- 加载状态 -->
		<!-- <view class="loading-container" v-if="loading">
			<uv-loading mode="circle" size="28"></uv-loading>
			<text class="loading-text">加载中...</text>
		</view> -->
	</view>


</template>

<script>

import TmpCategoryNav from '@/components/category/tmp-category-nav.vue'
import TmpSearch from '@/components/common/tmp-search.vue'
import TmpArticleCopywriting from '@/components/article/tmp-articel-copywriting.vue'
import TmpArticleCourse from '@/components/article/tmp-articel-course.vue'
import request from '@/common/tools/tools-request'

	const category = {
		"categoryType": [
			{
				"category_name": "全部",
				"category_type": "all",
				"category_code": "",
				"is_selected": true
			},
			{
				"category_name": "课程",
				"category_type": "course",
				"category_code": "course",
				"is_selected": false
			},
			{
				"category_name": "话术",
				"category_type": "script",
				"category_code": "script",
				"is_selected": false
			}
		],
		"categoryFirst": [
			{
				"category_name": "全部",
				"category_type": "all",
				"category_code": "",
				"is_selected": true
			},
			{
				"category_name": "日常",
				"category_type": "script",
				"category_code": "C25030306383QE24O2RG00M5",
				"is_selected": false
			},
			{
				"category_name": "恋爱心理学",
				"category_type": "course",
				"category_code": "C2504061224B2559C9IR3Y5H",
				"is_selected": false
			},
			{
				"category_name": "恋爱思维",
				"category_type": "course",
				"category_code": "C25022122470ZW0M589Q4V0O",
				"is_selected": false
			}
		],
		"categorySecond": [
			{
				"category_name": "全部",
				"category_type": "all",
				"category_code": "",
				"is_selected": true
			},
			{
				"category_name": "观念与态度",
				"category_type": "course",
				"category_code": "C25040612269A4T47J0DYS93",
				"is_selected": false
			},
			{
				"category_name": "决策与判断",
				"category_type": "course",
				"category_code": "C2504061226R3N6ZW1Y243D4",
				"is_selected": false
			},
			{
				"category_name": "自我成长",
				"category_type": "course",
				"category_code": "C2504061226L96O8W50EM9G5",
				"is_selected": false
			},
			{
				"category_name": "心理想象",
				"category_type": "course",
				"category_code": "C2504061227X946Y87V6N6IT",
				"is_selected": false
			},
			{
				"category_name": "观念态度",
				"category_type": "course",
				"category_code": "C2502220237G710G936K3OZA",
				"is_selected": false
			},
			{
				"category_name": "决策判断",
				"category_type": "course",
				"category_code": "C250222023784V111J2PDFD1",
				"is_selected": false
			}
		]
	};

	const articelListTmp = [
					{ title: '尽管我的道路从头到尾都长满了杂草，但也只有我自己是我这一生的见证人。', desc: '', hot: 2423, vip: true },
					{ title: '女生问"你是不是喜欢我？"真实和诚实..', desc: '', hot: 2423, vip: true },
					{ title: '女生问"你是不是喜欢我？"真实和诚实..', desc: '', hot: 2423, vip: true },
					{ title: '女生问"你是不是喜欢我？"真实和诚实和现实的区别到底是什么？', desc: '', hot: 2423, vip: true }
				];
	
	export default {
		components: { TmpCategoryNav, TmpSearch,TmpArticleCopywriting,TmpArticleCourse },
		data() {
			return {
				loading: true,	//分类导航加载状态
				contentLoading: false, //内容加载状态
				categoryList: {}, //原始数据

				categoryType: [],
				categoryFirst: [],
				categorySecond: [],
				contentList: [],

				//request params
				requestCategory: {
					typeCode: '',
					firstCode: '',
					secondCode: ''
				},

				//curretnTab
				currentTab: {
					typeIndex: 0,
					firstIndex: 0,
					secondIndex: 0
				},
			}
		},
		methods: {

			getCurrentCategoryCode(currentTabIndex, categoryList) {
				
				let currentCode = '';
				if (categoryList && categoryList.length > 0 && currentTabIndex < categoryList.length) {
					currentCode = categoryList[currentTabIndex].categoryCode;
				} 

				return currentCode;
			},

			//一级分类
			clickCategoryType(e) {
				this.currentTab.typeIndex = typeof e === 'object' ? e.index : e;

				this.requestCategory.typeCode = this.getCurrentCategoryCode(
					this.currentTab.typeIndex, 
					this.categoryList.categoryType
				)

				this.currentTab.firstIndex = 0;
				this.currentTab.secondIndex = 0;

				this.requestCategory.firstCode = '';
				this.requestCategory.secondCode = '';

				this.fetchCategoryContent(
					this.requestCategory.typeCode, 
					this.requestCategory.firstCode, 
					this.requestCategory.secondCode
				);

			},

			//2级分类
			clickCategoryFirst(e) {
				this.currentTab.firstIndex = typeof e === 'object' ? e.index : e;

				this.requestCategory.firstCode = this.getCurrentCategoryCode(
					this.currentTab.firstIndex, 
					this.categoryList.categoryFirst
				)

				this.currentTab.secondIndex = 0;
				this.requestCategory.secondCode = '';

				this.fetchCategoryContent(
					this.requestCategory.typeCode, 
					this.requestCategory.firstCode, 
					this.requestCategory.secondCode
				);

			},

			//3级分类
			clickCategorySecond(e) {
				this.currentTab.secondIndex = typeof e === 'object' ? e.index : e;

				this.requestCategory.secondCode = this.getCurrentCategoryCode(this.currentTab.secondIndex, this.categoryList.categorySecond)

				this.fetchCategoryContent(
					this.requestCategory.typeCode, 
					this.requestCategory.firstCode, 
					this.requestCategory.secondCode
				);

				// if (this.currentTab.firstCode == 0 ) {
				// 	this.currentTab.firstIndex = 0;
				// 	this.requestCategory.firstCode = '';
				// }
			},

			clickTabMore() {
	
				uni.showToast({
					title: '插槽被点击',
					icon: 'none'
				})
			},

			fetchCategoryContent(currentCategoryType, currentCategoryFirstCode, currentCategorySecondCode) {

				this.contentLoading = true;

				request.post({
					url: '/api/category/categoryAndContent',
					data: {
						'typeCode': currentCategoryType,
						'categoryFirstCode': currentCategoryFirstCode,
						'categorySecondCode': currentCategorySecondCode
					}
				}).then(res => {
					//console.log('API返回数据：', res);
					
					if(res.code === 2000) {
						this.categoryList = res.data.category;

						this.contentList = res.data.content.data || [];

						this.categoryType = res.data.category.categoryType.map(item => ({ name: item.categoryName })) || [];
						this.categoryFirst = res.data.category.categoryFirst.map(item => ({ name: item.categoryName })) || [];
						this.categorySecond = res.data.category.categorySecond.map(item => ({ name: item.categoryName })) || [];


						this.contentLoading = false;
					} else {
						uni.showToast({
							title: res.message || '获取数据失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					//console.error('获取分类内容失败:', err);
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					});
				}).finally(() => {
					this.loading = false;
				});
			},
		},
		onLoad() {
			this.fetchCategoryContent(
					this.requestCategory.typeCode,
					this.requestCategory.firstCode,
					this.requestCategory.secondCode,
			);
		},
	}
</script>

<style scoped>

.category-nav{
	background-color: #fff;
}

.content{
	background-color: #f8f9fe;
	min-height: 70vh;
	padding: 40rpx 20px;
}

.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #fff;
}

.loading-text {
	margin-top: 20rpx;
	color: #909399;
	font-size: 28rpx;
}

.no-data {
	text-align: center;
	padding: 40rpx;
	color: #909399;
	font-size: 28rpx;
}

.skeleton-container{
	margin-top: 40rpx;
	padding: 40rpx 40rpx;
}

.category-container {
	background: #fff;
	/* min-height: 100vh; */
	padding: 0rpx 24rpx;
}

.content-loading{
	height: 100rpx;
}

</style>
